<script setup>
import { ref } from "vue"


// let active = this.$route.meta.activeNum
let tabbar1a = new URL('../assets/img/tabbar1a.png', import.meta.url).href ;
let tabbar1b = new URL('../assets/img/tabbar1b.png', import.meta.url).href ;
let tabbar2a = new URL('../assets/img/tabbar2a.png', import.meta.url).href ;
let tabbar2b = new URL('../assets/img/tabbar2b.png', import.meta.url).href ;
let tabbar3a = new URL('../assets/img/tabbar3a.png', import.meta.url).href ;
let tabbar3b = new URL('../assets/img/tabbar3b.png', import.meta.url).href ;
let tabbar4a = new URL('../assets/img/tabbar4a.png', import.meta.url).href ;
let tabbar4b = new URL('../assets/img/tabbar4b.png', import.meta.url).href ;

let tabbar_data_list = ref([
  { id: 0,title:"电影", icon: "shop",url:"/" },
  { id: 1,title:"影院", icon: "smile-comment",url:"/community" },
  { id: 2,title:"资讯", icon: "gift",url:"/welfare"},
  { id: 3,title:"我的", icon: "manager",url:"/my" }
])

</script>

<template>

  <div class="tabbar">
      <!-- 底部导航栏 -->
      <van-tabbar v-model="$route.meta.activeNum" fixed>


        <van-tabbar-item  :to=tabbar_data_list[0].url>

          <span :class="$route.meta.activeNum===0? 'span-1':'span-0'" > {{tabbar_data_list[0].title}}</span>
          <template #icon="props">
            <img :src="$route.meta.activeNum===0 ?  tabbar1a: tabbar1b" />
<!--            <img :src="tabbar_data_list[0].aimg" />-->
          </template>
        </van-tabbar-item>

        <van-tabbar-item :to=tabbar_data_list[1].url>
          <span> {{tabbar_data_list[1].title}}</span>
          <template #icon="props">
          <img  :src="$route.meta.activeNum===1 ?  tabbar2a: tabbar2b" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item  :to=tabbar_data_list[2].url>
          <span> {{tabbar_data_list[2].title}}</span>
          <template #icon="props">
            <img  :src="$route.meta.activeNum===2 ?  tabbar3a: tabbar3b" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item :icon=tabbar_data_list[3].icon :to=tabbar_data_list[3].url>
          <span> {{tabbar_data_list[3].title}}</span>
          <template #icon="props">
            <img  :src="$route.meta.activeNum===3 ?  tabbar4a: tabbar4b" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>

</template>

<style scoped>
img{
  width: 20px;
  height:20px;
}
</style>